<template>
  <el-space style="width: 100%" fill>
    <el-skeleton
      class="recommend-skeleton"
      :loading="loading"
      animated
      :count="4"
      :throttle="{ leading: 500, trailing: 500, initVal: true }"
    >
      <!-- 骨架屏 -->
      <template #template>
        <div class="skeleton-item">
          <el-skeleton-item variant="image" class="skeleton-image" />
          <div class="skeleton-content">
            <el-skeleton-item variant="h3" class="skeleton-title" />
            <div class="skeleton-meta">
              <el-skeleton-item variant="text" class="skeleton-text" />
              <el-skeleton-item variant="text" class="skeleton-text-short" />
            </div>
          </div>
        </div>
      </template>

      <!-- 正常内容 -->
      <template #default>
        <div v-if="recommendScenic != null && recommendScenic.length != 0" class="recommend-list">
          <el-card
            v-for="(scenic, index) in recommendScenic"
            :key="index"
            class="recommend-card"
            shadow="hover"
            :body-style="{ padding: '0' }"
          >
            <img
              :src="scenic.scenicPics[0]"
              v-if="scenic.scenicPics.length != 0"
              alt="scenic"
              class="card-image"
            />
            <img
              v-else
              src="@/assets/path1.jpg"
              alt="scenic"
              class="card-image"
            />
            <div class="card-content">
              <h3 class="card-title">{{ scenic.scenicName }}</h3>
              <div class="card-footer">
                <div class="card-rating">评分: {{ scenic.rating }}</div>
                <el-button type="success" text size="small" class="card-btn">
                  <router-link
                    :to="{
                      name: 'showScenic',
                      params: {
                        scenicId: scenic.scenicId,
                      },
                    }"
                    style="text-decoration: none"
                    >查看详情
                  </router-link>
                </el-button>
              </div>
            </div>
          </el-card>
        </div>
        <div v-else class="empty-wrapper" style="background-color: #fff">
          <el-empty description="暂无推荐" />
        </div>
      </template>
    </el-skeleton>
  </el-space>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { BriefScenic } from '@/utils/dataType/ScenicModel.ts'
import { fetchAllBriefScenic } from '@/services/api/scenic.ts'

const loading = ref(true)
const recommendScenic = ref<Array<BriefScenic>>([])
onMounted(async () => {
  loading.value = true
  recommendScenic.value = []
  try {
    const res = await fetchAllBriefScenic() //此处的res就是data数据了，因为没有出错
    recommendScenic.value = res.data.length > 4 ? res.data.slice(0, 4) : res.data
    console.log('获取的景点信息',recommendScenic.value)
    // if (res.data.code == 1) {
    //   if (res.data.data != null) {
    //     recommendScenic.value = res.data.data.length > 4 ? res.data.data.slice(0, 4) : res.data.data
    //   }
    // } else {
    //   ElMessage.error('出错了:' + res.data.msg)
    // }
    loading.value = false //正确执行才能取消加载
  } catch (error) {
    console.error('[首页]获取景点信息:出错了->', error)
  }
})
</script>

<style scoped>
.recommend-skeleton {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 16px 0;
}

.skeleton-item {
  flex: 1;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-image {
  height: 160px;
  border-radius: 12px;
}

.skeleton-content {
  padding: 12px 8px 0;
}

.skeleton-title {
  width: 70%;
  height: 20px;
  border-radius: 4px;
}

.skeleton-meta {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  height: 18px;
}

.skeleton-text {
  flex: 1;
  border-radius: 4px;
}

.skeleton-text-short {
  width: 40%;
  border-radius: 4px;
}

.recommend-list {
  display: flex;
  gap: 24px;
  flex-wrap: nowrap; /* 禁止换行 */
  overflow-x: auto; /* 横向滚动 */
  padding-bottom: 12px;
}

.recommend-card {
  width: 280px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.recommend-card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.card-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-bottom: 1px solid #eee;
}

.card-content {
  padding: 14px 16px;
  background-color: #fff;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px 0;
  color: #333;
  user-select: none;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-rating {
  font-size: 14px;
  color: #67c23a;
  font-weight: 500;
}

.card-btn {
  font-weight: 600;
  color: #409eff;
  padding: 0;
}

.empty-wrapper {
  width: 100%;
  padding: 60px 0;
  display: flex;
  justify-content: center;
}
</style>
